
<style>
    .panel {
        margin-bottom: 17px;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    }
    .panel .panel-heading {
        padding: 2px 8px;
    }
    .panel-default {
        border-color: #ddd;
    }    .panel-default>.panel-heading {
        color: #333;
        background-color: #f7fafa;
        border-color: #eaeef1;    }
    .panel header {
        position: relative;
    }    .shop-sku .table{
        width: 100%;
    }
    .shop-sku .table th, .shop-sku .table td{
        border: 1px solid #ddd;
        border-collapse: collapse;
    }
    .shop-sku .table input {
        width: 100%;
        border: none;
        padding: 0 5px;
    }
    .shop-sku .table th {
        text-align: center;
    }
    .shop-sku .table .disabled td, .shop-sku .table .disabled td input {
        background: #F7F7F7;
        color: #b1b1b1;
    }
    .shop-sku .batch-box td {
        padding: 4px 4px;
    }
    .shop-sku .batch-box input {
        border: 1px solid #ddd;
    }
</style>
<template id="shop-sku">
    <div class="shop-sku">
        <div class="form-group">
            <div id="app" v-cloak>
                <div style="margin-bottom: 5px;">
                    <a-input type="text" class="form-control" style="width: 250px" @keyup.enter="addRow"
                        v-model="attrGroupName" placeholder="输入规格组名称">
                        <a slot="addonAfter" @click="addRow">添加规格</a>
                    </a-input>
                </div>
                <div>
                    <div class="panel panel-default" v-for="(item, i) in attrGroups" :key="i">
                        <header class="panel-heading">
                            <a-icon type="delete" class="pointer color-disabled" @click="removeGroup(i)" style="color: red;"></a-icon>
                            <span>{{item}}</span>
                        </header>
                        <a-row style="margin: 5px 0;">
                            <a-col :span="12" style="padding: 5px;">
                                <div>
                                    <a-input type="text" placeholder="请输入规格项名称" class="form-control" @keyup.enter="addChild(i)"
                                        :ref="'attr-item-name-' + i">
                                        <a slot="addonAfter" class="pointer" @click="addChild(i)">添加</a>
                                    </a-input>
                                </div>
                            </a-col>
                            <a-col :span="12" style="padding: 5px 0;">
                                <vuedraggable v-model="attrItems[i]" class="shop-drag-box" @end="generateProducts">
                                    <a-tag class="pointer" type="success" title="移除" v-for="(v, j) in attrItems[i]" :key="j"
                                    @click="removeChild(i, j)">{{v}}</a-tag>
                                </vuedraggable>
                            </a-col>
                        </a-row>
                    </div>
                </div>                <div class="row" v-show="productSkus.length">
                    <div class="col-md-12">
                        <table class="table table-bordered attr-table">
                            <thead>
                                <tr>
                                    <th v-for="(item, i) in attrGroups" :key="i">
                                        {{item}}
                                        <input type="text" name="attrs[group][]" v-show="false" v-model="item" />
                                    </th>
                                    <th>市场价</th>
                                    <th>销售价</th>
                                    <th>库存</th>
                                    <th>重量</th>
                                    <th>编码</th>
                                    <th>图片</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, i) in productSkus" :key="i"
                                    :class="skus[i] && skus[i].stock <= 0 ? 'disabled' : ''">
                                    <td class="text-center" v-for="(v, j) in item" :key="j">
                                        {{v}}
                                    </td>
                                    <td width="80">
                                        <input type="number" class="text-center" v-model="skus[i] && skus[i].market_price ">
                                    </td>
                                    <td width="80"><input type="number" class="text-center"
                                            v-model="skus[i] && skus[i].price">
                                    </td>
                                    <td width="80"><input type="number" class="text-center"
                                            v-model="skus[i] && skus[i].stock">
                                    </td>
                                    <td width="80"><input type="number" class="text-center"
                                            v-model="skus[i] && skus[i].weight"></td>
                                    <td width="80">
                                        <input type="text" class="text-center" v-model="skus[i] && skus[i].sn">
                                    </td>
                                    <td width="80" align="center">
                                        <yi-image type="card" v-model="skus[i] && skus[i].image"></yi-image>
                                    </td>
                                </tr>
                                <tr class="batch-box">
                                    <td align="center" v-if="attrGroups.length"
                                        :colspan="productSkus[0] && productSkus[0].length">批量设置</td>
                                    <td align="center">
                                        <div class="input-group">
                                            <input type="number" ref="batch-set-market_price" @keyup.enter="batchSetAttr('market_price')">
                                            <div class="pointer" @click="batchSetAttr('market_price')">设置</div>
                                        </div>
                                    </td>
                                    <td align="center">
                                        <div class="input-group ">
                                            <input type="number" ref="batch-set-price" @keyup.enter="batchSetAttr('price')">
                                            <div class="pointer" @click="batchSetAttr('price')">设置</div>
                                        </div>
                                    </td>
                                    <td align="center">
                                        <div class="input-group">
                                            <input type="number" ref="batch-set-stock" @keyup.enter="batchSetAttr('stock')">
                                            <div class="pointer" @click="batchSetAttr('stock')">设置</div>
                                        </div>
                                    </td>
                                    <td align="center">
                                        <div class="input-group">
                                            <input type="number"  ref="batch-set-weight" @keyup.enter="batchSetAttr('weight')">
                                            <div class="pointer" @click="batchSetAttr('weight')">设置</div>
                                        </div>
                                    </td>
                                    <td align="center">
                                        <div class="input-group">
                                            <input type="text"  ref="batch-set-sn" @keyup.enter="batchSetAttr('sn')">
                                            <div class="pointer" @click="batchSetAttr('sn')">设置</div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    Yi.ready(function () {
        Vue.component('shop-sku', {
            template: '#shop-sku',
            data: function () {
                return {
                    attrGroups: [],
                    attrItems: [],
                    productSkus: [],
                    skus: [],
                    attrGroupName: ''
                }
            },
            computed: {
                productSkusStr() {
                    return JSON.stringify(this.productSkus)
                }
            },
            props: {
                value: {
                    default: []
                }
            },
            watch: {
                skus: {
                    deep: true,
                    handler: function(v) {
                        this.$emit('input', v);
                    }
                }
            },
            methods: {
                init: function(skus, attrItems) {
                    this.skus = skus;
                    this.attrGroups = this.skus[0].keys.split(',')
                    this.attrItems = attrItems;
                    this.generateProducts();
                },
                addRow() {
                    var val = this.attrGroupName;
                    if ($.trim(val) == '') {
                        this.$message.error("不能为空")
                        return
                    }
                    if (val.indexOf(',') > -1) {
                        this.$message.error("规格子项 " + val + " 不能包含符号‘,’")
                        return
                    }
                    this.attrGroups.push(val)
                    this.attrGroupName = '';
                },
                addChild(index) {
                    var val = this.$refs['attr-item-name-' + index][0].stateValue
                    if ($.trim(val) == '') {
                        this.$message.error("不能为空")
                        return
                    }
                    if (val.indexOf(',') > -1) {
                        this.$message.error("规格 " + val + " 不能包含符号‘,’")
                        return
                    }
                    if (!val) return false
                    if (this.attrItems[index]) {
                        this.attrItems[index].push(val)
                    } else {
                        this.attrItems.push([val])
                    }
                    this.$refs['attr-item-name-' + index][0].stateValue = '';
                    this.generateProducts()
                },
                removeChild(i, j) {
                    this.attrItems[i].splice(j, 1)
                    this.generateProducts()
                },
                removeGroup(i) {
                    this.attrGroups.pop(i)
                    if (this.attrItems[i])
                        this.attrItems.pop(i)
                    this.generateProducts()
                },
                generateProducts() {
                    this.productSkus = this.descartes(this.attrItems)
                    this.generateSkus()
                },
                generateSkus() {
                    var skus = [];
                    for (var i = 0; i < this.productSkus.length; i++) {
                        var item = this.productSkus[i];
                        var keys = this.attrGroups.join(',');
                        var index = Yi.util.findRows(this.skus, 'value', item.join(',') );
                        if (index == -1) skus.push({
                            keys: keys, value: item.join(','), market_price: '', price: '', stock: '', weight: '', sn: '', image: '', sort: i
                        });
                        else {
                            var sku = this.skus[index];
                            sku.sort = i;
                            skus.push(sku);
                        }
                    }
                    this.$set(this, 'skus', skus);
                },
                batchSetAttr: function(name) {
                    var skus = this.skus;
                    for (var i = 0 ; i < this.productSkus.length; i ++) {
                        skus[i][name] = this.$refs['batch-set-' + name].value;
                    }
                    this.$refs['batch-set-' + name].value = '';
                    this.$set(this, 'skus', skus);
                },
                descartes(array) {
                    if (array.length == 0) return []
                    if (array.length < 2) {
                        var res = []
                        array[0].forEach(function (v) {
                            res.push([v])
                        })
                        return res
                    }
                    return [].reduce.call(array, function (col, set) {
                        var res = [];
                        col.forEach(function (c) {
                            set.forEach(function (s) {
                                var t = [].concat(Array.isArray(c) ? c : [c]);
                                t.push(s);
                                res.push(t);
                            })
                        });
                        return res;
                    });
                }
            }
        })
    })
</script>
<template id="shop-sku-simple">
    <div>
        <a-form layout="inline">
            <a-form-item>
                <a-input v-model="form.name" placeholder="型号"></a-input>
            </a-form-item>
            <a-form-item>
                <a-input v-model="form.spec" placeholder="规格"></a-input>
            </a-form-item>
            <a-form-item>
                <a-input-number v-model="form.price" placeholder="价格"></a-input-number>
            </a-form-item>
            <a-form-item label="阶梯价格">
                <a-switch v-model="form.price_type" />
            </a-form-item>
        </a-form>
        <div v-if="form.price_type">
            <table class="yi-table">
                <tr><th>数量</th><th>价格</th><th>操作</th></tr>
                <tr v-for="(item,i) in form.price_list" :key="i">
                    <td> <input type="number" v-model="item.quantity" class="text-center"> </td>
                    <td> <input type="number" v-model="item.price" class="text-center"> </td>
                    <td class="text-center">
                        <a @click="remove(i)">
                            <a-icon type="delete" style="color: red;"></a-icon>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" @click="add" class="text-center pointer">添加</td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
    Yi.ready(function() {
        Vue.component('shop-sku-simple', {
            template: '#shop-sku-simple',
            data: function() {
                return {
                    form: {
                        name: '',
                        spec: '',
                        price: '',
                        price_type: 1,
                        price_list: []
                    }
                }
            },
            methods: {
                add: function() {
                    this.form.price_list.push({
                        quantity: '', price: ''
                    });
                },
                remove: function(i) {
                    this.form.price_list.splice(i, 1);
                }
            }
        });
    });
</script>